<template>
  <view class="container">
    <!-- 传统风格背景 -->
    <image 
      class="background"
      src="https://example.com/牛纹背景图.png"
      mode="aspectFill"
    ></image>

    <!-- 主内容区域 -->
    <scroll-view class="content" scroll-y>
      <!-- 标题 -->
      <view class="header">
        <text class="title">{{ historyData.title || '非遗掼牛文化' }}</text>
        <image 
          class="decorate"
          src="https://example.com/传统纹样.png"
          mode="widthFix"
        ></image>
      </view>

      <!-- 内容主体 -->
      <view class="main-content">
        <view class="text-content">
          <text class="history-text">{{ historyData.content }}</text>
        </view>
      </view>

      <!-- 随机换一按钮 -->
      <view class="action-box">
        <view class="refresh-btn" @click="getHistoryData">
          <text class="btn-text">换一个故事</text>
          <image 
            class="refresh-icon"
            src="https://mp-1de2ab47-60cc-4717-bb0c-985e43d6d68e.cdn.bspapp.com/img/icon/refresh.png"
            mode="widthFix"
          ></image>
        </view>
      </view>
    </scroll-view>

    <!-- 加载状态 -->
    <view v-if="loading" class="loading-mask">
      <view class="loading-box">
        <image 
          class="loading-icon"
          src="https://example.com/加载动画.gif"
          mode="widthFix"
        ></image>
        <text class="loading-text">文化传承加载中...</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      historyData: {},  // 历史数据
      loading: false    // 加载状态
    }
  },
  onLoad() {
    this.getHistoryData()
  },
  methods: {
    // 获取历史数据
    async getHistoryData() {
      this.loading = true
      try {
        const res = await uniCloud.callFunction({
          name: 'getBullCultureHistory',
          data: { action: 'random' }
        })
        
        this.historyData = res.result.data || {}
        uni.pageScrollTo({ scrollTop: 0, duration: 300 })
        
      } catch (e) {
        uni.showToast({
          title: '文化传承加载失败',
          icon: 'none'
        })
        console.error('数据获取失败:', e)
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style scoped>
/* 容器样式 */
.container {
  height: 100vh;
  position: relative;
  background: #f5f1e8;
}

/* 传统背景图 */
.background {
  position: fixed;
  width: 100%;
  height: 100%;
  opacity: 0.15;
  z-index: 0;
}

/* 标题样式 */
.header {
  position: relative;
  margin-bottom: 60rpx;
  text-align: center;
}

.title {
  font-family: '华文行楷';
  font-size: 46rpx;
  color: #8b4513;
  display: block;
  margin-bottom: 20rpx;
}

.decorate {
  width: 80%;
  height: 40rpx;
}

/* 主要内容 */
.main-content {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
  width: calc(100% - 60rpx); /* 新增宽度计算 */
  margin: 0 auto; /* 新增居中 */
  box-sizing: border-box; /* 新增盒模型 */
}

.culture-image {
  width: 100%;
  border-radius: 12rpx;
  margin-bottom: 30rpx;
  border: 4rpx solid #8b4513;
  box-sizing: border-box; /* 新增防止边框溢出 */
}

/* 主内容区域 */
.content {
  position: relative;
  z-index: 1;
  padding: 40rpx 30rpx;
  height: 100vh;
  box-sizing: border-box; /* 新增盒模型 */
}

.text-content {
  padding: 20rpx;
}

.history-text {
  font-size: 30rpx;
  line-height: 1.8;
  color: #654321;
  text-indent: 2em;
}

/* 换一按钮 */
.action-box {
  margin: 40rpx 0;
  display: flex;
  justify-content: center;
}

.refresh-btn {
  background: #FEFEFD;
  padding: 20rpx 60rpx;
  border-radius: 50rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 4rpx 12rpx rgba(139,69,19,0.3);
}

.btn-text {
  color: #9A4E25;
  font-size: 32rpx;
  margin-right: 20rpx;
}

.refresh-icon {
  width: 40rpx;
  height: 40rpx;
}

/* 加载状态 */
.loading-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255,255,255,0.9);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-box {
  text-align: center;
}

.loading-icon {
  width: 120rpx;
  height: 120rpx;
}

.loading-text {
  display: block;
  color: #8b4513;
  font-size: 28rpx;
  margin-top: 20rpx;
}
</style>